import React from 'react';
import { Form as AntForm, Button, Space, Card } from 'antd';

const Form = ({
  children,
  title,
  onFinish,
  onFinishFailed,
  initialValues,
  layout = 'horizontal',
  labelCol = { span: 6 },
  wrapperCol = { span: 18 },
  submitText = '提交',
  resetText = '重置',
  showReset = true,
  loading = false,
  extra,
  ...restProps
}) => {
  const [form] = AntForm.useForm();

  const handleReset = () => {
    form.resetFields();
  };

  const formContent = (
    <AntForm
      form={form}
      layout={layout}
      labelCol={labelCol}
      wrapperCol={wrapperCol}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
      initialValues={initialValues}
      {...restProps}
    >
      {children}
      <AntForm.Item wrapperCol={{ offset: layout === 'horizontal' ? labelCol.span : 0, span: wrapperCol.span }}>
        <Space>
          <Button type="primary" htmlType="submit" loading={loading}>
            {submitText}
          </Button>
          {showReset && (
            <Button htmlType="button" onClick={handleReset}>
              {resetText}
            </Button>
          )}
          {extra}
        </Space>
      </AntForm.Item>
    </AntForm>
  );

  if (title) {
    return (
      <Card title={title} bordered={false}>
        {formContent}
      </Card>
    );
  }

  return formContent;
};

export default Form;